<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>安澳智能蜘蛛笔记</title>
<link rel="stylesheet" href="css/jquery.fullPage.css">
<link rel="stylesheet" href="css/page2.css">
<link rel="shortcut icon" href="images/auais.ico"/>
<style>
.section {
	text-align: center;
	font: 50px "Microsoft Yahei";
	color: #fff;
}

.section2 p {
	position: relative;
	left: -120%;
}

.section3 p {
	position: relative;
	bottom: -120%;
}

.section4 p {
	display: none;
}
</style>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<script src="js/typed.min.js"></script>
<script
	src="http://cdn.staticfile.org/jquery-easing/1.3/jquery.easing.min.js"></script>
<script>
	$(function() {
		var n = 200;
		$('#dowebok').fullpage({
			sectionsColor : [ '#1bbc9b', '#4BBFC3', '#7BAABE', '#f90' ],
			afterLoad : function(anchorLink, index) {
				if (index == 2) {
					actionObject.beginAction();
				}
			}
		});
		var actionObject = {};
		//圆点点击
		actionObject.beginAction = function() {
			$("#Layer3").delay(3 * n).animate({
				opacity : 0
			}, 1 * n);
			$("#Layer3").delay(1 * n).animate({
				opacity : 1
			}, 1 * n, this.callBack1);
		};
		//背景图片替换
		actionObject.callBack1 = function() {
			$("#back").attr('src', 'images/leixing.png');
			actionObject.callBack2();
		};
		//移动鼠标再次点击
		actionObject.callBack2 = function() {
			$("#Layer3").delay(1 * n).animate({
				left: '50px', top: '275px'
			}, 2 * n);
			//延迟点击很重要
			$("#Layer3").delay(1 * n).animate({
				opacity : 0
			}, 1 * n);
			$("#Layer3").animate({
				opacity : 1
			}, 1 * n, this.callBack3);
		};
		//隐藏按钮，替换背景图片，输出文字
		actionObject.callBack3 = function() {
			$("#back").attr('src', 'images/wenzishuru.png');
			$("#Layer3").hide();
			$(".element").show();
			
			$(".element").typed({
	            strings: ["研究发现，只要喝一瓶300毫升的啤酒，你就能吊起蚊子的胃口。"],
	            typeSpeed: 0.2 * n,
	            startDelay: 3 * n,
	            backDelay: 3 * n,
	            loop: false,
	            contentType: 'html',
	            loopCount: true,
	            callback: function(){
	            	actionObject.callBack5();
	            },
	        });
		};
		//鼠标点击完成
		actionObject.callBack5 = function() {
			$("#Layer3").css({ "left": "260px", "top": "320px",opacity : 0.8 }); 
			$("#Layer3").show();
			//延迟点击很重要
			$("#Layer3").delay(3 * n).animate({opacity : 0}, 1 * n);
			$("#Layer3").delay(0.5 * n).animate({opacity : 0.8}, 1 * n,actionObject.callBack6);
		};
		//编辑页消失
		actionObject.callBack6 = function(){
			$("#Layer2").css({'background-image':'url(images/shouye.png)'});
			$("#Layer5").hide();
			//$("#Layer3").hide();
			//编辑页消失
			$("#back").animate({
				left:'270px',top:'21px',
			    opacity:0,
			    height:'0px',width:'0px'},5*n);
			$("#Layer6").show();
			$("#Layer6").delay(3 * n).animate({width:'30px',height:'29px',opacity : 0}, 3 * n,actionObject.callBack7);
		};
		//开关效果，开关点击
		actionObject.callBack7 = function(){
			$("#Layer6").find("img").delay(2 * n).attr('src', 'images/guan2.png');
			$("#Layer6").animate({width:'23px',height:'22px',opacity : 1}, 3 * n);
			$("#Layer3").delay(5 * n).animate({
				left:'260px',top:'24px',
					opacity : 0.8
			}, 2 * n);
			//延迟点击很重要
			$("#Layer3").delay(1 * n).animate({
				opacity : 0
			}, 1 * n);
			$("#Layer3").animate({
				opacity : 1
			}, 1 * n, actionObject.callBack8);
		};
		//弹出碎片盒子
		actionObject.callBack8 = function(){
			$("#Layer6").find("img").attr('src', 'images/kai.png');
			$("#Layer3").hide();
			$("#back").attr('src', 'images/peiceBox.png').show();
			$("#Layer7").show();
			$("#back").css({
				width:'100%',height:'100%',
				left:'0px',top:'0px',
				opacity : 1});
			$("#Layer3").delay(2 * n).show().animate({
				left:'76px',top:'95px',
					opacity : 0.8
			}, 2 * n);
			//延迟点击很重要
			$("#Layer3").delay(1 * n).animate({
				opacity : 0
			}, 1 * n);
			$("#Layer3").animate({
				opacity : 1
			}, 1 * n, actionObject.callBack9);
		};
		//区域放大，弹出尾页
		actionObject.callBack9 = function(){
			$("#Layer6").hide();
			$("#back2").attr('src', 'images/finished.png').show();
			$("#back2").css({left:'0px',top:'0px',width:'100%',height:'100%',opacity : 1});
			$("#Layer7").delay(1 * n).animate({
				width:'296px',height:'78px',opacity : 0
			}, 4 * n,actionObject.callBack10);
			$("#Layer8").delay(1 * n).animate({
				width:'356px',height:'92px',opacity : 0.7
			}, 3 * n,actionObject.callBack10);
		};
		actionObject.callBack10 = function(){
			$("#Layer3").animate({
				opacity : 0
			}, 3 * n);
			$("#Layer8").animate({
				width:'296px',height:'77px',opacity : 1
			}, 3 * n);
		}
	});
</script>
</head>
<body>
	<div id="dowebok">
		<div class="section section1">
			<h3>第一屏</h3>
			<p>fullPage.js — 回调函数演示</p>
		</div>
		<div class="section section2">
			<div id="Layer1">
				<img src="images/shoujike.png"/>
				<div id="Layer2">
					<div id="Layer8"><img src="images/wordPieceLong.png"/></div>
					<div id="Layer7"><img src="images/wordPiece.png"/></div>
					<div id="Layer6">
						<img id="kaiguan" src="images/guan1.png"/>
					</div>
					<div id="Layer5"><span class="element"></span></div>
					<img id="back" src="images/shouye.png"/>
					<img id="back2" src=""/>
					<div id="Layer3">
						<img src="images/shubiao.png"/>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>